<template>
    <div id="sidebar-wrapper" style="background-color: white;width: 182px">
        <ul class="sidebar" >
            <!--<li class="sidebar-main">-->
            <!--<a>-->
            <!--<i class="fa fa-building-o" ></i>  业主管理后台-->
            <!--<span  @click="toggleSidebar" class="menu-icon glyphicon glyphicon-transfer"></span>-->
            <!--</a>-->
            <!--</li>-->
            <li @click="choose('')" >
                <a :class="routeName == 'home' ? 'active' : 'origin'" >
                    <img class="icon" v-if="routeName == 'home'" :src="home2" >
                    <img class="icon" v-else  :src="home">
                    首页
                </a>
            </li>

            <li @click="choose('msg/0')">
                <a :class="routeName == 'msg' ? 'active' : 'origin'" >
                    <img class="icon" v-if="routeName == 'msg'" :src="msg2" >
                    <img class="icon" v-else  :src="msg">
                    信息公告
                </a>
            </li>

            <li @click="choose('fund')">
                <a  :class="routeName == 'fund' ? 'active' : 'origin'">
                    <img class="icon" v-if="routeName == 'fund'" :src="fund2" >
                    <img class="icon" v-else  :src="fund">
                    我的资金
                </a>
            </li>

            <li @click="choose('vote/0')">
                <a  :class="routeName == 'vote' ? 'active' : 'origin'">
                    <img class="icon" v-if="routeName == 'vote'" :src="vote2" >
                    <img class="icon" v-else  :src="vote">
                    我的投票
                </a>
            </li>

            <li @click="choose('advice')">
                <a  :class="routeName == 'advice' ? 'active' : 'origin'">
                    <img class="icon" v-if="routeName == 'advice'" :src="advice2" >
                    <img class="icon" v-else  :src="advice">
                    投诉建议
                </a>
            </li>

            <li @click="choose('facility')">
                <a  :class="routeName == 'facility' ? 'active' : 'origin'">
                    <img class="icon" v-if="routeName == 'facility'" :src="facility2" >
                    <img class="icon" v-else  :src="facility">
                    设备设施
                </a>
            </li>


            <li style="height: 60px;">

            </li>

        </ul>
        <div class="sidebar-footer">
            <div class="col-xs-12">
                <a href="#"  target="_blank">
                    &copy; 2017 新拓科技 powered by vue.js
                </a>
            </div>
        </div>
    </div>
</template>

<script type="application/ecmascript">
    export default {
        name: 'siderbar',//侧边栏
        data () {
            return {
                home : this.getImage('menu/home.png'),
                home2 : this.getImage('menu/home2.png'),
                msg:this.getImage('menu/msg.png'),
                msg2:this.getImage('menu/msg2.png'),
                fund:this.getImage('menu/fund.png'),
                fund2:this.getImage('menu/fund2.png'),
                vote:this.getImage('menu/vote.png'),
                vote2:this.getImage('menu/vote2.png'),
                advice:this.getImage('menu/advice.png'),
                advice2:this.getImage('menu/advice2.png'),
                facility:this.getImage('menu/facility.png'),
                facility2:this.getImage('menu/facility2.png'),
            }
        },
        computed:{
            routeName: function () {
                return this.$store.getters.getRouteName
            }
        },
        methods:{
            toggleSidebar(){
                this.$emit('toggleSidebar');//将点击事件传到父组件
            },
            choose(routeName){
                let route = routeName.split('/')[0];
                if(route==''){
                    route = 'home';
                }
                if(route == this.$store.getters.getRouteName ){
                    console.log('send--->' + route);
                    this.$emit('change');
                }
                location.href = '/#/' + routeName
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss' rel="stylesheet/scss" type="text/css">
    .origin  {
        color: #2a3542;
        font-size: 16px;
    }

    .active{
        color: #2ea5f8;
        border-left: 3px solid #2ea5f8;
        text-indent: 22px;
        background: #e8f8fe;
        font-size: 16px;
        width: 182px;
    }

    .icon{
        padding: 0 10px 3px 0;
    }

    .sidebar-list{
        height:50px
    }

    ul.sidebar li a {
        width: 182px;
        height:50px;
        line-height: 50px;
        cursor: pointer;
    }

</style>
